

<template>
<div>
    <div style="margin: 5px">
        <h4  style="text-align: left;">提升等级</h4>
      <div style="text-align: left">  距离下个等级仅需{{score}}个创作积分</div>
    </div>
    <el-progress :percentage="80" :format="format"></el-progress>
    <div style="display: flex">
      <h6 style="text-align: left;margin: 5px;width: 70%">最新作品：回答{{newcomment}}|点赞{{newlike}}|{{time}}</h6>
        <el-link type="primary" style="width: 30%;font-size: 10px" @click="goxiang()">查看详情</el-link>
    </div>


    <div class="container">
        <h1 class="project-name" style="text-align: left;margin: 5px">动  态</h1>
        <div id="timeline">
            <TimelineItem v-for="(item, index) in items" :key="index" :title="item.title" :content="item.content" class="timeline-item">
                <div class="timeline-icon">
                    <svg style="left: 0%; position: relative;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         width="21px" height="20px" viewBox="0 0 21 20" enable-background="new 0 0 21 20" xml:space="preserve">
            <path fill="#FFFFFF" d="M19.998,6.766l-5.759-0.544c-0.362-0.032-0.676-0.264-0.822-0.610l-2.064-4.999
            c-0.329-0.825-1.5-0.825-1.83,0L7.476,5.611c-0.132,0.346-0.462,0.578-0.824,0.610L0.894,6.766C0.035,6.848-0.312,7.921,0.333,8.499
            l4.338,3.811c0.279,0.246,0.395,0.609,0.314,0.975l-1.304,5.345c-0.199,0.842,0.708,1.534,1.468,1.089l4.801-2.822
            c0.313-0.181,0.695-0.181,1.006,0l4.803,2.822c0.759,0.445,1.666-0.230,1.468-1.089l-1.288-5.345
            c-0.081-0.365,0.035-0.729,0.313-0.975l4.34-3.811C21.219,7.921,20.855,6.848,19.998,6.766z"/>
          </svg>
                </div>
                <h5 style="">{{item.new_time}}</h5>
                <div class="timeline-content right">
                    <h2 >{{ item.new_title }}</h2>
                    <p>{{ item.new_content | truncateText }}</p>
                    <div style="text-align: right ">
                    <a :href="item.buttonLink" class="btn" style="text-align: right" >编辑</a></div>
                </div>
            </TimelineItem>
        </div>
    </div>

</div>


</template>
<script>
import axios from "axios";

export default {
    data() {
        return {
            time:'',
            score:'10',
            newlike:'3',
            newzan:'3',
            newcomment:'3',
            items: [
                // {
                //     title: 'Lorem Ipsum Dolor 1',
                //     content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.',
                //     buttonText: 'Button 1',
                //     buttonLink: '#'
                // },

            ],
            activities: [{
                content: '支持使用图标',
                timestamp: '2018-04-12 20:46',
                size: 'normal ',
                type: 'primary',
                icon: 'el-icon-more'
            }, {
                content: '支持自定义颜色',
                timestamp: '2018-04-03 20:46',
                color: '#0bbd87'
            }, {
                content: '支持自定义尺寸',
                timestamp: '2018-04-03 20:46',
                size: 'large'
            }, {
                content: '默认样式的节点',
                timestamp: '2018-04-03 20:46'
            }],
             userId:this.$store.getters.getuserId
        };
    },
    methods: {
        goxiang(){
            this.$router.push('/newsdetail');
        },
        format(percentage) {
            return percentage === 100 ? '满' : `${percentage}%`;
        },
        async getnewlist() {
           const userId=this.$store.getters.getuserId;
            try {
                const response = await axios.get(`/api/news/getallnew?publisher_id=${userId}`);
                const responseData = response.data;
                this.items=responseData;
                console.log("fsljf"+response);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        },
        async geinewnest(){
            const userId = this.$store.getters.getuserId;
            try {

                const response = await axios.get(`/api/news/getAllOwnNews?publisherId=${userId}`);
                const responseData = response.data;
                const newid=responseData[0].new_id;
                this.time=responseData[0].new_time;
              console.log("我活着"+userId);
                console.log("我是新闻id"+newid);
                    try {
                        const response1=await axios.get(`/api/comments/CommentListByNewsId?newsId=${newid}`);
                        const commentData=response1.data;
                        await this.$store.dispatch('setnewId', newid);
                       //这里要获取id
                        console.log("我是新闻评论"+commentData.data.length);

                        this.newcomment=commentData.data.length;

                    }catch (error){
                        console.error('Error fetching data:', error);

                    }
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }
    },
    mounted() {
        this.getnewlist();
        this.geinewnest();
    },
    filters: {
        truncateText(value) {
            // 只显示前200个字符
            return value.length > 200 ? value.slice(0, 200) + '...' : value;
        },
    },
};
</script>
<style scoped>
@import '../assets/shijianxian.css';
.right {
    float: right;
    width: 60px;
}
</style>
